<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>好物到家</title>
    <%-- 导入css --%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/client/css/main.css" type="text/css" />

    <link href="../../jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="../../jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="../../jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

    <script>
        $(function () {
            /*1.获取商品价格 图片 地址 */
            var datasource;
            $.ajax({
                url: "${pageContext.request.contextPath}/settings/goods/findAllGoods",
                data: {
                    "category": "联想"
                },
                type: "get",
                dataType: "json",
                success: function (data) {
                    datasource = data;
                    console.log(data)
                    if (data != null) {
                        console.log('123')
                        //为相应数据赋值
                        $("#sp0").html(data[0].gname);
                        $("#sp1").html(data[1].gname)
                        $("#sp2").html(data[2].gname)
                        $("#sp3").html(data[3].gname)
                        $("#im0").attr('src', data[0].gimgaddress)
                        $("#im1").attr('src', data[1].gimgaddress)
                        $("#im2").attr('src', data[2].gimgaddress)
                        $("#im3").attr('src', data[3].gimgaddress)

                    }
                }
            })
            /*2.点击查看详情 获取该商品名字 模态框讲数据填充*/
            $("#bu1").click(function () {
                console.log(datasource)
                $("#msp1").html(datasource[0].gname);
                $("#msp2").html(datasource[0].gprice);
                $("#msp3").html(datasource[0].gdescription);
            })
            $("#bu2").click(function () {
                console.log(datasource)
                $("#msp1").html(datasource[1].gname);
                $("#msp2").html(datasource[1].gprice);
                $("#msp3").html(datasource[1].gdescription);
            })
            $("#bu3").click(function () {
                console.log(datasource)
                $("#msp1").html(datasource[2].gname);
                $("#msp2").html(datasource[2].gprice);
                $("#msp3").html(datasource[2].gdescription);
            })
            $("#bu4").click(function () {
                console.log(datasource)
                $("#msp1").html(datasource[3].gname);
                $("#msp2").html(datasource[3].gprice);
                $("#msp3").html(datasource[3].gdescription);
            })
            /*3.点击按钮将商品加入购物车*/
            $("#ibu1").click(function () {
                var name =  datasource[0].gname;
                var price = datasource[0].gprice
                insertcart(name,price);
            })
            $("#ibu2").click(function () {
                var name =  datasource[1].gname;
                var price = datasource[1].gprice
                insertcart(name,price);
            })
            $("#ibu3").click(function () {
                var name =  datasource[2].gname;
                var price = datasource[2].gprice
                insertcart(name,price);
            })
            $("#ibu4").click(function () {
                var name =  datasource[3].gname;
                var price = datasource[3].gprice
                insertcart(name,price);
            })

        });

        //将商品计入购物车
        function insertcart(name,price) {
            $.ajax({
                url: "${pageContext.request.contextPath}/settings/goods/insertcart",
                data: {
                    "goodsname": name,
                    "goodsprice":price
                },
                type: "get",
                dataType: "json",
                success: function (data) {
                    console.log(data)
                    if (data.success){
                        alert("商品添加成功")
                    }
                }
            })
        }
        function updatepwd() {
            var newp = $.trim($("#newpwd").val());
            var nam11 = sessionStorage.getItem("username");
            $.ajax({
                url: "${pageContext.request.contextPath}/settings/user/updatePassword",
                data: {
                    "username": nam11,
                    "newpwd": newp
                },
                type: "get",
                dataType: "json",
                success: function (data) {
                    console.log(data)
                    if (data.success){
                        sessionStorage.setItem("password",newp)
                        alert("更新密码成功")
                    }

                }
            })
        }
    </script>

</head>

<body class="main">
<%@include file="../head.jsp"%>
<%@include file="../menu_search.jsp" %>
<%-- <div id="divad">
    <img src="${pageContext.request.contextPath}/client/ad/index_ad.jpg"/>
</div> --%>
<%--修改信息模态框--%>
<div class="modal fade" id="selfmessage" role="dialog">
    <div class="modal-dialog" role="document" style="width: 30%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">个人信息</h4>
            </div>
            <div class="modal-body">
                <div style="text-align: left">
                    <br>
                    <label>用户名:
                        <sapn id="selfname">123</sapn>
                    </label>
                    <br>

                    <br>
                    <label>原密码:
                        <sapn id="oldpwd">123</sapn>
                    </label>
                    <br>
                    <br>
                    <label>新密码:</label>
                    <input type="text" id="newpwd" placeholder="请输入新密码">
                    <br>
                </div>
            </div>
            <div class="modal-footer">
                <button id="uppwd" type="button" class="btn btn-primary" data-dismiss="modal">确定修改</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<%--商品详情模态框--%>
<div class="modal fade" id="goodsInformation" role="dialog">
    <div class="modal-dialog" role="document" style="width: 30%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">商品资料</h4>
            </div>
            <div class="modal-body">
                <div style="text-align: left">
                    <span style="font-size: 20px;"><font color="#deb887">商品:</font></span><span id="msp1" style="font-size: 20px">1</span><br>
                   <br> <span style="font-size: 20px"><font color="#deb887">价格:</font></span><span id="msp2" style="font-size: 20px">2</span><br>
                   <br> <span style="font-size: 20px"><font color="#deb887">详情:</font></span><span id="msp3" style="font-size: 20px">3</span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 商品  start -->
    <div class="row">
        <ul class="list-group">
            <div class="col-md-3">
                <li class="list-group-item">
                    <img id="im0" src="">
                </li>
                <br>
                <li>
                    <span id="sp0" style="font-size: 20px"></span>
                </li>
                <button id="bu1" type="button" class="btn btn-primary " data-toggle="modal" data-target="#goodsInformation">
                    查看详情
                </button>
                <button id="ibu1" type="button" class="btn btn-success" style="margin-left: 100px;margin-top: 10px">加入购物车</button>
            </div>
            <div class="col-md-3">
                <li class="list-group-item">
                    <img id="im1" src="">
                </li>
                <br>
                <li>
                    <span id="sp1" style="font-size: 20px"></span>
                </li>
                <button id="bu2" type="button" class="btn btn-primary " data-toggle="modal" data-target="#goodsInformation">
                    查看详情
                </button>
                <button id="ibu2" type="button" class="btn btn-success" style="margin-left: 100px;margin-top: 10px">加入购物车</button>
            </div>
            <div class="col-md-3">
                <li class="list-group-item">
                    <img id="im2" src="">
                </li>
                <br>
                <li>
                    <span id="sp2" style="font-size: 20px"></span>
                </li>
                <button id="bu3" type="button" class="btn btn-primary " data-toggle="modal" data-target="#goodsInformation">
                    查看详情
                </button>
                <button id="ibu3" type="button" class="btn btn-success" style="margin-left: 100px;margin-top: 10px">加入购物车</button>
            </div>
            <div class="col-md-3">
                <li class="list-group-item">
                    <img id="im3" src="">
                </li>
                <br>
                <li>
                    <span id="sp3" style="font-size: 20px"></span>
                </li>
                <button id="bu4" type="button" class="btn btn-primary " data-toggle="modal" data-target="#goodsInformation">
                    查看详情
                </button>
                <button id="ibu4" type="button" class="btn btn-success" style="margin-left: 100px;margin-top: 10px">加入购物车</button>
            </div>
        </ul>
    </div>
<!-- 商品  end -->
<div id="divcontent">
    <table width="900px" border="0" cellspacing="0">
        <tr>
            <td width="497">
                <img src="${pageContext.request.contextPath}/client/images/billboard.gif" width="497" height="38" />
                <table cellspacing="0" class="ctl">
                    <tr>
                        <td width="485" height="100%">${n.details }</td>
                    </tr>
                </table>
            </td>
            <td style="padding:5px 15px 10px 40px">
                <table width="100%" border="0" cellspacing="0">
                    <tr>
                        <td>
                            <img src="${pageContext.request.contextPath}/client/images/hottitle.gif" width="126" height="29" />
                        </td>
                    </tr>
                </table>
                <table width="100%" border="0" cellspacing="0">
                    <tr>
                        <c:forEach items="${pList }" var="pArray">
                            <td style="width:80px; text-align:center">
                                <a href="${pageContext.request.contextPath}/findProductById?id=${pArray[0]}">
                                    <img src="${pageContext.request.contextPath }${pArray[2]}" width="102" height="130" border="0" />
                                </a>
                                <br/>
                                <a href="${pageContext.request.contextPath}/findProductById?id=${pArray[0]}">${pArray[1]}</a>
                            </td>
                        </c:forEach>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>


</body>
</html>
